<template>
  <div class="card_box">
    <!-- <div class="box_bg"></div>
    <div class="card_title">
      <div>深圳市房地产营销人员</div>
      <div>信息登记卡</div>
    </div>
    <div class="card_img">
      <div><img :src="data.head_img"></div>
      <div>{{ data.username }}</div>
    </div>
    <div class="card_text">
      <div>营销卡号：{{ data.market_card }} <span class="tetx_zt">{{ data.isValid }}</span></div>
      <div>有效日期：{{ data.market_card_effective_time }}</div>
      <div>证件类型：房地产一手楼营销人员</div>
      <div>执业单位：{{ data.company_name }}</div>
    </div>
    <div class="card_logo">
      <div class="logo_l">
        <div><img src="@/assets/img/yx_logo.png"></div>
        <div>咨询投诉电话：0755-83788967</div>
      </div>
      <div class="logo_r"><img src="@/assets/img/logo-z.jpg"></div>
    </div> -->
    <img :src="data.card_image">
  </div>

  <!-- <div class="see_card" @click="go"><a>查看登记卡使用说明</a></div> -->

  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <!-- <div class="font400 content3 color4" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div> -->
      <!-- <div class="font400 content3 color4" @click="share">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang" />
        </svg>
        <p class="content2 font400 color3">
          分享
        </p>
      </div> -->
      <!-- <div @click="download" class="agree font400 content3 color4">
        下载
      </div> -->
      <div @click="back" class="agree font400 content3 color4">
        返回
      </div>
    </div>
  </div>
  <Loading :visible="visible" :share-img="shareImg" @closeLoading="closeLoading" />
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
// import { Dialog } from 'vant'
// import wx from 'weixin-js-sdk'
import { getMyCardInfo } from '@/api'
import { useRoute, useRouter } from 'vue-router'
// import { Toast } from 'vant'
import { useStore } from 'vuex'
const Loading = defineAsyncComponent(() => import('@/components/LoadingYx/index.vue'))
const store = useStore()
const router = useRouter()
const route = useRoute()
const data: any = ref({})
const visible: any = ref(false)
const shareImg: any = ref('')

getMyCardInfo({ id: route.query.id }).then(res => {
  data.value = res
  data.value.market_card_effective_time = data.value.market_card_effective_time.split('-')
  data.value.market_card_effective_time.splice(1, 0, '年')
  data.value.market_card_effective_time.splice(3, 0, '月')
  data.value.market_card_effective_time.splice(5, 0, '日')
  data.value.market_card_effective_time = data.value.market_card_effective_time.join('')
  console.log(res, data.value.market_card_effective_time)
  // wx.request({
  //   url: 'https://api.weixin.qq.com/cgi-bin/token',
  //   data: {
  //     grant_type: 'client_credential',
  //     appid:'wx64608f112b5948da',
  //     appsecret:'962d9a9e6cee63d5f40fbef410776369'
  //   },
  //   method: 'POST',
  // })
})

// const go = () => {
//   console.log(123)
//   // window.open(`https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz={MzI1ODEwNDQ1Mg==}`)
// }

const back = () => {
  console.log(store.state.from.path)
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const closeLoading = async () => {
  visible.value = false
}

// const download = async () => {
//   console.log('下载')
//   wx.previewImage({
//     current: 'https://t8.baidu.com/it/u=3232202444,878240977&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=DAB961CAC942065354459608030070CC&sec=1656090000&t=12527b6092737489f43ba3b809f31f79',
//     uls: ['https://t8.baidu.com/it/u=3232202444,878240977&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=DAB961CAC942065354459608030070CC&sec=1656090000&t=12527b6092737489f43ba3b809f31f79 '],
//     success: () => {
//       console.log('成功')
//     },
//     complete: () => {
//       console.log('失败')
//     }
//   })

//   // downloadImage('/src/assets/img/yx_img.png', '信息登记卡')
// }

// const share = async () => {
//   try {
//     visible.value = true
//     console.log(encodeURIComponent(window.location.href))
//     shareImg.value = data.value.card_image
//   } catch (error: any) {
//     Toast(error.message)
//   }
// }

// const getImageBase64 = (image: any) => {
//   const canvas = document.createElement('canvas')
//   canvas.width = image.width
//   canvas.height = image.height
//   const ctx = canvas.getContext('2d')
//   ctx && ctx.drawImage(image, 0, 0, image.width, image.height)
//   // 获取图片后缀名
//   const extension = image.src
//     .substring(image.src.lastIndexOf('.') + 1)
//     .toLowerCase()
//   // 某些图片 url 可能没有后缀名，默认是 png
//   return canvas.toDataURL('image/' + extension, 1)
// }

// const downloadImage = (url: any, downloadName: any) => {
//   const link = document.createElement('a')
//   link.setAttribute('download', downloadName)
//   const image = new Image()
//   // 添加时间戳，防止浏览器缓存图片
//   image.src = url + '?timestamp=' + new Date().getTime()
//   // 设置 crossOrigin 属性，解决图片跨域报错
//   image.setAttribute('crossOrigin', 'Anonymous')
//   image.onload = () => {
//     link.href = getImageBase64(image)
//     link.click()
//   }
// }

</script>

<style lang="less" scoped>
.card_box {
  position: relative;
  text-align: center;
  width: 90%;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 28px 5px #fff1e5;
  background: url(@/assets/img/yx_bg.png) no-repeat;
  background-size: 215px 265px;
  background-position: 115% 115%;

  img {
    width: 100%;
  }

  // // box-shadow: 5px 25px 120px 0px #E16C1B;
  // .box_bg {
  //   background: -webkit-linear-gradient(#FFFFFF, #FFD5AD);
  //   /* Safari 5.1 - 6.0 */

  //   background: -o-linear-gradient(#FFFFFF, #FFD5AD);
  //   /* Opera 11.1 - 12.0 */

  //   background: -moz-linear-gradient(#FFFFFF, #FFD5AD);
  //   /* Firefox 3.6 - 15 */

  //   background: linear-gradient(#FFFFFF, #FFD5AD);
  //   /* 标准的语法（必须放在最后） */
  //   position: absolute;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   z-index: -1;
  // }

  // .card_title {
  //   padding-top: 20px;
  //   // text-align: center;

  //   div:nth-child(1) {
  //     font-size: 18px;
  //   }

  //   div:nth-child(2) {
  //     margin-top: 10px;
  //     font-size: 26px;
  //     font-weight: bold;
  //   }
  // }

  // .card_img {
  //   div:nth-child(1) {
  //     display: inline-block;
  //     margin: 20px 0;
  //     width: 100px;

  //     img {
  //       width: 100%;
  //     }
  //   }

  //   div:nth-child(2) {
  //     font-size: 22px;
  //     font-weight: bold;
  //   }
  // }

  // .card_text {
  //   text-align: left;
  //   margin: 20px 0;
  //   padding-left: 30px;
  //   line-height: 28px;
  //   font-size: 14px;
  //   color: #454757;

  //   .tetx_zt {
  //     color: #FFFFFF;
  //     background-color: #FF7A1F;
  //     border-radius: 4px;
  //     padding: 0px 4px;
  //   }
  // }

  // .card_logo {
  //   display: flex;
  //   text-align: left;
  //   padding: 0 20px 20px 30px;

  //   .logo_l {
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: flex-end;

  //     div:nth-child(1) {
  //       width: 180px;
  //       display: inline-block;

  //       img {
  //         width: 100%;
  //       }
  //     }

  //     div:nth-child(2) {
  //       font-size: 12px;
  //       margin: 8px 0;
  //     }
  //   }

  //   .logo_r {
  //     width: 80px;
  //     margin-left: 30px;

  //     img {
  //       width: 100%;
  //     }
  //   }
  // }
}

.see_card {
  text-align: center;
  font-size: 12px;
  color: #454757;

  a {
    text-decoration: underline;
  }
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;

    .agree {
      width: 100%;
      height: 44px;
      background: #999;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }

    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

@media (min-width: 750px) {
  .card_box {
    width: 90%;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 28px 5px #fff1e5;
    background-size: 215px 265px;
    background-position: 115% 115%;

    .box_bg {}

    .card_title {
      padding-top: 20px;
      // text-align: center;

      div:nth-child(1) {
        font-size: 18px;
      }

      div:nth-child(2) {
        margin-top: 10px;
        font-size: 28px;
      }
    }

    .card_img {
      div:nth-child(1) {
        margin: 20px 0;
        width: 100px;

        img {
          width: 100%;
        }
      }

      div:nth-child(2) {
        font-size: 24px;
      }
    }

    .card_text {
      margin: 20px 0;
      padding-left: 30px;
      line-height: 28px;
      font-size: 14px;

      .tetx_zt {
        border-radius: 4px;
        padding: 0px 4px;
      }
    }

    .card_logo {
      padding: 0 20px 20px 30px;

      .logo_l {

        div:nth-child(1) {
          width: 180px;

          img {
            width: 100%;
          }
        }

        div:nth-child(2) {
          font-size: 12px;
          margin: 8px 0;
        }
      }

      .logo_r {
        width: 80px;
        margin-left: 30px;

        img {
          width: 100%;
        }
      }
    }
  }

  .see_card {
    font-size: 12px;
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 30px;
      height: 100%;
      text-align: center;

      .agree {
        width: 100%;
        height: 44px;
        background: #999;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }

      .icon {
        width: 23px;
        height: 23px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
